<template>
  <div>
    <div class="topboby">
      <div class="btu">
        <el-button @click="nowTag">现有确诊</el-button>
        <el-button @click="allTag">累计确诊</el-button>
      </div>
      <div class="map">
        <Map :tag_1="tag"></Map>
      </div>
      <div id="content"></div>
    </div>
    <div v-if="world.data">截止:{{ world.data.mtime }}</div>
    <div class="bottomboby">
      <div class="data">
        <el-row :gutter="5">
          <el-col :span="8">
            <div class="grid-content1 bg-purple1">
              <div>全球累计确诊</div>
              <div>{{ world.data.othertotal.certain }}</div>
              <div>
                较昨日<span>{{ world.data.othertotal.certain_inc }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content2 bg-purple2">
              <div>全球累计治愈</div>
              <div>{{  world.data.othertotal.recure }}</div>
              <div>
                较昨日<span>{{ world.data.othertotal.recure_inc }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content3 bg-purple3">
              <div>全球累计死亡</div>
              <div>{{ world.data.othertotal.die}}</div>
              <div>
                较昨日<span>{{ world.data.othertotal.die_inc }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-table :data="world.data.worldlist" style="width: 100%">
        <el-table-column prop="name" label="疫情地区" width="180">
        </el-table-column>
        <el-table-column prop="econNum" label="现有确诊" width="180">
        </el-table-column>
        <el-table-column prop="value" label="累计"> </el-table-column>
        <el-table-column prop="cureNum" label="治愈"> </el-table-column>
        <el-table-column prop="deathNum" label="死亡"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import world from "@/assets/data.json";
import { mapActions, mapState } from "vuex";
import Map from "../../components/WorldMap_qhq";
import axios from "@/http/axios";
export default {
  // 将分页查询的疫情数据的前十条显示到折线图
  // x轴显示省份，y轴显示确诊人数
  mounted() {
    this.initEchart(this.res00);
  },
  components: {
    Map,
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  data() {
    return {
      res00: "",
      world,
      id: 0,
      loading: true,
      tag: 0,
    };
  },
  // 组件销毁，离开当前页面
  destroyed() {
    clearInterval(this.id);
  },
  created() {
    // this.id = setInterval(() => {
    //   this.findData();
    // }, 5000);
    setTimeout(()=>{this.findData();} )
  },
  methods: {
    findData() {
      // 拿到worldlsit里面的value，
      let res4 = this.world.data.worldlist.map((item) => {
        return Number(item.value);
      });
      // 重新排序
      let res_4 = res4.sort(function (a, b) {
        if (a > b) {
          return -1;
        } else {
          return 1;
        }
      });
      this.res00 = res_4;
      this.initEchart(res_4);
    },
    // 初始化图表
    initEchart(res_4) {
      echarts.init(document.getElementById("content")).dispose();
      var myChart = echarts.init(document.getElementById("content"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "全球COVID-19新冠病毒确诊国家/地区TOP10",
          subtext: "数据来自网络",
        },
        xAxis: {
          type: "category",
          data: [
            "美国",
            "印度",
            "巴西",
            "俄罗斯",
            "英国",
            "法国",
            "土耳其",
            "意大利",
            "西班牙",
            "德国",
          ],
          axisLabel: {
            formatter(val) {
              return val.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            margin: 5,
        },
    },
    grid: {
        left: 80
    },
 
        series: [
          {
            data: [
              res_4[0],
              res_4[1],
              res_4[2],
              res_4[3],
              res_4[4],
              res_4[5],
              res_4[6],
              res_4[7],
              res_4[8],
              res_4[9],
            ],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            itemStyle: {
              color: "red",
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    nowTag() {
      this.tag = 0;
    },
    allTag() {
      this.tag = 1;
    },
  }
};
</script>

<style scoped>
.bottomboby {
  position: absoulte;
  /* background-color: bisque; */
}
.topboby {
  position: absoulte;
  height: 550px;
}
.map {
  position: relative;
  width: 650px;
  height: 500px;
}
.btu {
  width: 200px;
}
.btu2 {
  position: relative;
  left: 30%;
}
#content {
  position: relative;
  height: 300px;
  width: 600px;
  top: -400px;
  left: 55%;
}
.data .grid-content1 div:first-child {
  font-weight: 700;
}
.data .grid-content2 div:first-child {
  font-weight: 700;
}
.data .grid-content3 div:first-child {
  font-weight: 700;
}
.data .grid-content1 div:nth-child(2) {
  margin-top:-50px;
  color: #be2121;
  font-size: 4.267vw;
  line-height: 5.867vw;
  height: 5.867vw;
  font-weight: 600;
  padding-top: 1.6vw;
}
.data .grid-content2 div:nth-child(2) {
  margin-top:-50px;
  color: #178b50;
  font-size: 4.267vw;
  line-height: 5.867vw;
  height: 5.867vw;
  font-weight: 600;
  padding-top: 1.6vw;
}
.data .grid-content3 div:nth-child(2) {
  margin-top:-50px;
  color: #4e5a65;
  font-size: 4.267vw;
  line-height: 5.867vw;
  height: 5.867vw;
  font-weight: 600;
  padding-top: 1.6vw;
}
.data .grid-content1 div:nth-child(3) span {
  padding-top: 1.6vw;
  color: #178b50;
  font-size: 2.667vw;
  line-height: 2.667vw;
  height: 2.667vw;
  font-weight: 500;
  white-space: nowrap;
}
.data .grid-content1 div:nth-child(3) span {
  padding-top: 1.6vw;
  color: #be2121;
  font-size: 2.667vw;
  line-height: 2.667vw;
  height: 2.667vw;
  font-weight: 500;
  white-space: nowrap;
}
.data .grid-content2 div:nth-child(3) span {
  padding-top: 1.6vw;
  color: #4e5a65;
  font-size: 2.667vw;
  line-height: 2.667vw;
  height: 2.667vw;
  font-weight: 500;
  white-space: nowrap;
}
.data .grid-content3 div:nth-child(3) span {
  padding-top: 1.6vw;
  color: #7c7c7c;
  font-size: 2.667vw;
  line-height: 2.667vw;
  height: 2.667vw;
  font-weight: 500;
  white-space: nowrap;
}
.data .grid-content1 div {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.data .grid-content2 div {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.data .grid-content3 div {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bg-purple1 {
  background: #fff8f8;
}
.bg-purple2 {
  background:#f1f8f4;
}
.bg-purple3 {
  background:#f3f6f8;
}
</style>